﻿@{
    ViewBag.Title = "จัดการโครงการ";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css"
    rel="stylesheet" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"
    type="text/jscript"></script>
<style type="text/css">
    .dynamicDiv
    {
        width: 400px;
        height: 100px;
        border: solid 1px #c0c0c0;
        background-color: #e1e1e1;
        font-size: 11px;
        vertical-align: top;
        font-family: verdana;
        color: #000;
        padding: 5px;
    }
    .dynamicTable
    {
        width: 400px;
        height: 100px;
        border: solid 1px #c0c0c0;
        background-color: #e1e1e1;
        font-size: 11px;
        vertical-align: top;
        font-family: verdana;
        color: #000;
        padding: 5px;
        margin: 10px;
    }
</style>
<script type="text/javascript">

    //-------------------
    //     Initialize
    //-------------------
    var project;
    $(document).ready(function () {
        project = new Object();
        project.customerId = '';
        project.projectId = 'proj' + (new Date()).getTime();
        
        var projectId = 'proj' + (new Date()).getTime();
        $("#hfProjectId").val(projectId);
        console.log("hfProjectId:" + projectId);


        //tab1 Search Customer
        $("#btnSearchCustomer").click(function () {
            doSearch();
        });
        $("#btnSearchCustomer").keypress(function (e) {
            var key = e.which || e.keyCode;
            if (key == 13) {
                doSearch();
            }
        });
        $("#btnCustomerSave").click(function () {
            var custName = $("#txtCustFirstName").val();
            var custTel = $("#txtCustTel").val(); 
            if(custName == '')
            {
                alert("กรุณากรอกชื่อลูกค้า");
                return false;
            }else if(custTel == '')
            {
                alert("กรุณากรอกเบอร์โทรศัพท์ลูกค้า");
                return false;
            }
            saveCustomer();
        });

        $("#btnCustomerReset").click(function () {
            clearCustomerForm();
        });

        $("#txtDate").datepicker({ changeYear: true,
            changeMonth: true,
            constrainInput: true,
            buttonText: 'Choose',
            showOn: 'both',
            showButtonPanel: true,
            buttonImageOnly: false,
            buttonImage: ''
        });
        $("#tabs").tabs({ disabled: [1, 2, 3, 4] });


        $("#dialog-areaDesign").dialog({
            autoOpen: false,
            height: 140,
            modal: true
        });

        $("#dialog-areaProperties").dialog({
            autoOpen: false,
            height: 140,
            modal: true
        });

        $("#dialog-generateDesign").dialog({
            autoOpen: false,
            height: 140,
            modal: true
        });

        $("#confirmDlg").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                "Confirm": function(){
                    alert("You have confirmed");
                },
                "Cancel" : function(){
                    $(this).dialog("close");
                }
            }
        });
    });
    $(function () {
        $("#tabs").tabs();
    }); 
    $(function () {
        $("#customerTabs").tabs();
    });

    function clearCustomerForm() {
        $("#txtCustFirstName").val("");
        $("#txtCustLastName").val("");
        $("#txtCustCompany").val("");
        $("#drpCustType").val("person");
        $("#txtCustTel").val("");
        $("#txtCustEmail").val("");
        $("#txtCustFax").val("");
        $("#txtCustAddress").val("");       
    }

    function doClear() {
        $("#input01").val("");
        $('#grdCustomer').jqGrid('clearGridData');
    }

    $("#btnClear").click(function () {
        doClear();
    });
    
    function dlgConfirm(e) {
        $("#confirmDlg").dialog("open");
    }
    //-------------------
    //   ---------------------  tabs Event ---------------------
    //-------------------

    function onNext() {
        var index = $('#tabs').tabs('option', 'selected');
        var nextTab = index + 1;
        
        if (index == 0) 
        {
            if (!validateTab1()) 
            {
                alert('กรุณาเลือกลูกค้า');
                return false; 
            }                        
            $("#tabs").tabs({ disabled: [0, 2, 3] });
            $("#tabs").tabs('select', nextTab);

            var selectedProj = $("#hfSelectedProject").val();
            if (selectedProj=='')
                createProject();
            initializeTab2();      
        }
        else if (index == 1)
        {
            $("#tabs").tabs({ disabled: [0, 1, 3] });
            $("#tabs").tabs('select', nextTab);
        }
        else if (index == 2)
        {
            $("#tabs").tabs({ disabled: [0, 1, 2] });
            $("#tabs").tabs('select', nextTab);
            initializeTab4();
            initializeMaps();
        }
//        else if (index == 3)
//        {
//            $("#tabs").tabs({ disabled: [0, 1, 2] });
//            $("#tabs").tabs('select', nextTab);
//            initializeTab4();
//        }
        
    }

    function onPrev() {
        var index = $('#tabs').tabs('option', 'selected');
        var prevTab = index - 1;
        
        if (index == 1)
        $("#tabs").tabs({ disabled: [1, 2, 3] });
        else if (index == 2)
        $("#tabs").tabs({ disabled: [0, 2, 3] });
        else if (index == 3)
        $("#tabs").tabs({ disabled: [0, 1, 3] });

        $("#tabs").tabs('select', prevTab);
    }

    //-------------------
    //  ---------------------   tab1 Customer---------------------
    //-------------------

    function initializeTab1(){
        
    }

    

    function doSearch1() {

        var keyword = $("#txtSearchCustomer").val();

        var params = {
            keyword: keyword
        };

        $('#grdCustomer').jqGrid('clearGridData');
        $('#grdCustomer').setGridParam({ url: '/Customer/GetCustomers', postData: params }).trigger('reloadGrid');

    }

    function validateTab1() { 
        var grdCustomer = $("#grdCustomer");
        var selectedRow = grdCustomer.getGridParam("selrow");
        var rowData = grdCustomer.getRowData(selectedRow);
        var id = rowData.customer_id;
        var selectArrow = $("#grdCustomer").jqGrid('getGridParam', 'selarrrow');
        var selectedCount;
        if (selectArrow == null)
            selectedCount = 0;
        else
            selectedCount = selectArrow.length;

        console.log(selectedCount);
        console.log("hf selected Customer:" + getSelectedCustomer());
        if ($("#hfSelectedCustomer").val() != '')
            return true;
        if (selectedCount == 0 || $("#hfSelectedCustomer").val() == '')
            return false;
        return true;
    }
    
    function setSelectedCustomer(customerId, customerFirstName) {
        $("#hfSelectedCustomer").val(customerId);
        $("#txtSelectedCustomer").val(customerId);
        $("#txtCustomerName").val(customerFirstName);
        $("#hfCustomerName").val(customerFirstName);
        console.log("set customerId:"+customerId + " : firstName : " + customerFirstName);
    }
    
    function getSelectedCustomer() {
        console.log("get customerId:"+ $("#hfSelectedCustomer").val());
        return $("#hfSelectedCustomer").val();
    }

    function setProjectDetails(projectName, customerName){
         $("#hfProjectName").val(projectName);
         $("#hfCustomerName").val(customerName);
    }

    function setSelectedProject(projectId) {
        $("#hfSelectedProject").val(projectId);
        $("#txtSelectedProject").val(projectId);
        console.log("set projectId:"+projectId);
    }
    function getSelectedProject() {
        console.log("get projectId:"+ $("#hfSelectedProject").val());
        return  $("#hfSelectedProject").val();
    }

    function getSelectedProjectName(){
        if($(!"#txtSelectedProject").val()=='')
            return $("#txtSelectedProject").val();
        return $("#hfSelectedProject").val();
    }

    function saveCustomer() {
        var txtCustFirstName = $("#txtCustFirstName").val();
        var txtCustLastName = $("#txtCustLastName").val();
        var txtCustCompany = $("#txtCustCompany").val();
        var txtCustTel = $("#txtCustTel").val();
        var txtCustEmail = $("#txtCustEmail").val();
        var txtCustFax = $("#txtCustFax").val();
        var txtCustAddress = $("#txtCustAddress").val();
        var drpCustType = $("#drpCustType").val();
        var params = {
            oper: "add",
            customer_firstname: txtCustFirstName,
            customer_lastname: txtCustLastName,
            customer_company: txtCustCompany,
            customer_email: txtCustEmail,
            customer_fax: txtCustFax,
            customer_address: txtCustAddress,
            customer_tel: txtCustTel,
            customer_type: drpCustType
        };

        var newparams = "{oper:\"add\",customer_firstname:\"" + txtCustFirstName +
                                "\",customer_lastname:\"" + txtCustLastName +
                                "\",customer_company:\"" + txtCustCompany +
                                "\",customer_email:\"" + txtCustEmail +
                                "\",customer_fax:\"" + txtCustFax +
                                "\",customer_address:\"" + txtCustAddress +
                                "\",customer_tel:\"" + txtCustTel +
                                "\",customer_type:\"" + drpCustType + "\"}";

        $.ajax({
            type: "POST",
            url: "/Customer/Updates",
            data: newparams,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (result, status, xhr) {
                if (result.isPass == false) {
                    alert("เพิ่มข้อมูลลูกค้า ผิดพลาด");
                }
                else {
                    alert("เพิ่มข้อมูลลูกค้า สำเร็จ");
                    $("#customerTabs").tabs('select', 0);
                }
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });

    }

    function doSearch() {

        var updateDialog = {
            url: '/Customer/Update'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , afterShowForm: function (formId) {

                }
                , afterclickPgButtons: function (whichbutton, formid, rowid) {

                }
                , modal: true
                , onclickSubmit: function (params) {
                    var ajaxData = {};

                    var list = $("#grdCustomer");
                    var selectedRow = list.getGridParam("selrow");
                    var rowData = list.getRowData(selectedRow);
                    ajaxData = { customer_id: rowData.customer_id, customerTypeId: rowData.customer_type_id };

                    return ajaxData;
                }, success: function (result, status, xhr) {
                    if (result.isPass == false) {
                        alert(result.iMessage);
                    }
                    else {
                        alert("success");
                        dialog.dialog("close");
                    }
                }
                , width: "550"
        };

        $.jgrid.nav.addtext = "";
        $.jgrid.nav.edittext = "";
        $.jgrid.nav.deltext = "";
        $.jgrid.edit.addCaption = "เพิ่มลุกค้า";
        $.jgrid.edit.editCaption = "แก้ไขลุกค้า";
        $.jgrid.del.caption = "ต้องการลบรายการนี้หรือไม่?";
        $.jgrid.del.msg = "ต้องการลบรายการนี้หรือไม่?";

        var keyword = $("#txtSearchCustName").val();

        var params = {
            keyword: keyword
        };

        $("#grdCustomer").jqGrid({
            postData: params,
            url: '/Customer/GetCustomers',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Customer Id', 'ชื่อ-นามสกุล', 'ชื่อ', 'นามสกุล', 'บริษัท', 'ที่อยู่', 'ติดต่อ', 'โทรสาร', 'อีเมล์', 'ประเภทลูกค้า', 'วันที่สร้าง'],
            colModel: [
                    { name: 'customer_id', index: 'customer_id', width: 40, align: 'left', key: true, editable: true, editrules: { edithidden: false }, hidden: true },
                    { name: 'customer_fullname', index: 'customer_fullname', width: 100, align: 'left', key: false, editable: false, edittype: 'text', editrules: { required: false} },
                    { name: 'customer_firstname', index: 'customer_firstname', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true }, hidden: false },
                    { name: 'customer_lastname', index: 'customer_lastname', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: false }, hidden: false },
                    { name: 'customer_company', index: 'customer_company', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: false} },
                    { name: 'customer_address', index: 'customer_address', width: 120, align: 'left', key: false, editable: true, edittype: 'textarea', editrules: { required: false} },
                    { name: 'customer_tel', index: 'customer_tel', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: false} },
                    { name: 'customer_fax', index: 'customer_fax', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: false} },
                    { name: 'customer_email', index: 'customer_email', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: false} },
                    { name: 'customer_type', index: 'customer_type', width: 40, align: 'left', key: false, editable: true, edittype: 'select', editoptions: { value: { 'บุคคล': 'บุคคล', 'บริษัท': 'บริษัท'} }, editrules: { required: true }, hidden: true },
                    { name: 'customer_create_date', index: 'customer_create_date', width: 40, align: 'left', key: false, hidden: true}],
            pager: $('#pagerCustomer'),
            beforeSelectRow: function (rowid, e) {

                var list = $("#grdCustomer");
                var selectedRow = list.getGridParam("selrow");
                var rowData = list.getRowData(selectedRow);
                var ids = jQuery("#grdCustomer").jqGrid('getGridParam', 'selarrrow');
                if (ids.length == 0) {
                    $("#grdCustomer").jqGrid('resetSelection');
                    $("#hfCustomerName").val(rowData.customer_firstname);
                    return (true);
                } else if (ids[0] == rowid) {
                    $("#grdCustomer").jqGrid('resetSelection');
                    setSelectedCustomer("", "");
                    return (false);
                } else {
                    $("#grdCustomer").jqGrid('resetSelection');
                    $("#hfCustomerName").val(rowData.customer_firstname);
                    return (true);
                }
            },
            onSelectRow: function (rowid, status, e) {//after row selected, set customerId to hidden field
                var list = $("#grdCustomer");
                var selectedRow = list.getGridParam("selrow");
                var rowData = list.getRowData(selectedRow);
                var ids = jQuery("#grdCustomer").jqGrid('getGridParam', 'selarrrow');
                if (ids.length == 0) {
                    console.log("rowData.customer_id : " + rowData.customer_id);
                    setSelectedCustomer(rowData.customer_id, rowData.customer_firstname);
                } else {
                    console.log("rowData.customer_id : " + rowData.customer_id);
                    setSelectedCustomer(rowData.customer_id, rowData.customer_firstname);
                }
            },
            rowNum: 10,
            width: 850, height: 230,
            rownumbers: true,
            multiselect: true,
            sortname: 'customer_create_date',
            sortorder: "desc",
            viewrecords: true,
            shrinkToFit: true,
            caption: 'รายการลูกค้า',
            autowidth: true,
            //---------SubGrid Section
            subGrid: true,
            // subGridRowExpanded: function (subgridId, mainRowId) {
            subGridRowExpanded: function (subgridId, mainRowId) { // mainRowId => id ของ key ที่กำหนดไว้ที่ colModel (ในที่นี้คือ customer_id)
                var subgridTableId; // id ของ Grid ที่แสดงรายการขั้นตอนการดำเนินงาน
                var subgridPagerId; // id ของ Pager ของ Grid ที่แสดงขั้นตอนการดำเนินงาน
                subgridTableId = subgridId + "_t";
                subgridPagerId = "p_" + subgridTableId;
                var theSubgrid = "#" + subgridTableId;
                jQuery("#" + subgridId).html("<table id='" + subgridTableId + "' class='scroll'></table><div id='" + subgridPagerId + "' class='scroll'></div>");
                jQuery(theSubgrid).jqGrid({
                    url: '/Project/GetProjectByCustomerId',
                    postData: { custId: mainRowId },
                    datatype: "json",
                    mtype: 'POST',
                    colNames: ['โครงการ', 'ที่อยู่โครงการ', 'ลูกค้า', 'วันที่ปรับปรุง'],
                    colModel: [
                                { name: "project_id", index: 'project_id', width: 100, align: 'left', key: false, editable: false, edittype: 'text', editrules: { required: true}, formatter: getProjectName },
                                { name: "project_location", index: "project_location", width: 100, align: 'left', key: true, editable: false, edittype: 'text', editrules: { required: true} },
                                { name: "customer_id", index: "customer_id", width: 100, align: 'left', key: false, editable: false, edittype: 'text', editrules: { required: true} },
                                { name: "project_create_date", index: "project_create_date", width: 100, align: 'left', key: false, editable: false, edittype: 'text', editrules: { required: true} }
                    ],
                    height: '100%',
                    rowNum: 20,
                    width: 735,
                    multiselect: true,
                    beforeSelectRow: function (rowid, e) {
                        var list = $(theSubgrid);
                        var selectedRow = list.getGridParam("selrow");
                        var rowData = list.getRowData(selectedRow);
                        var ids = jQuery(theSubgrid).jqGrid('getGridParam', 'selarrrow');
                        if (ids.length == 0) {
                            $(theSubgrid).jqGrid('resetSelection');
                            setProjectDetails(rowData.project_id,rowData.customer_id);
                            return (true);
                        } else if (ids[0] == rowid) {
                            $(theSubgrid).jqGrid('resetSelection');
                            setSelectedProject("", "");
                            return (false);
                        } else {
                            $(theSubgrid).jqGrid('resetSelection');
                            setProjectDetails(rowData.project_id,rowData.customer_id);
                            return (true);
                        }
                    },
                    onSelectRow: function (rowid, status, e) {//after row selected, set customerId to hidden field
                        var list = $(theSubgrid);
                        var selectedRow = list.getGridParam("selrow");
                        var rowData = list.getRowData(selectedRow);
                        var ids = jQuery(theSubgrid).jqGrid('getGridParam', 'selarrrow');
                        console.log("rowData.project_id : " + rowData.project_id);
                        setSelectedProject(rowData.project_id);
                        setSelectedCustomer(mainRowId,rowData.customer_firstname);                        
                    },
                    viewrecords: true,
                    rownumbers: true,
                    sortname: 'customer_id',
                    sortorder: "asc",
                    caption: 'โปรเจ็ค',
                    pager: subgridPagerId
                }).navGrid('#' + subgridPagerId,
                        {
                            edit: false, add: false, del: false, search: false, refresh: false
                        }
                    );
                var subGridProj = $(theSubgrid);
                $("#cb_" + subGridProj[0].id).hide();
            }
            //--------------------------
        }).navGrid('#pagerCustomer',
            {
                edit: true, add: false, del: true, search: false, refresh: true
            },
            updateDialog, updateDialog, updateDialog
        );

        $('#grdCustomer').jqGrid('clearGridData');
        $('#grdCustomer').setGridParam({ url: '/Customer/GetCustomers', postData: params }).trigger('reloadGrid');

        //to hide checkbox at header
        var myGrid = $("#grdCustomer");
        $("#cb_" + myGrid[0].id).hide();
    }
    function imageFormat(cellvalue, options, rowObject) {
        return '<img src=' + rowObject[9] + ' width="50" height="50"/>'; // block_outline_url
    }
    function getProjectName(cellvalue, options, rowObject){
        var d = new Date(rowObject[3]);
        var date = dateToYMD(d);
        console.log(rowObject[0] + "|"+ date);
        return rowObject[0]+date;
    }

    function dateToYMD(date) {
        var d = date.getDate();
        var m = date.getMonth() + 1;
        var y = date.getFullYear();
        return '' + y + '' + (m<=9 ? '0' + m : m) + '' + (d <= 9 ? '0' + d : d);
    }

    function createProject(projectId) {
        var customerId = $("#hfSelectedCustomer").val();
        var projectLocation = '';
        var proj_worker = '';
        $.ajax({
            type: "POST",
            url: "/TheProject/CreateOrUpdateProject",
            data: "{project_id:\"" + projectId + "\",customer_id:\"" + customerId + "\",project_location:\"" + projectLocation + "\",proj_worker:\"" + proj_worker + "\"}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (result, status, xhr) {
                if (result.isPass == false) {
                    $("#txtErrorMessage").text(result.iMessage);
                }
                else {
                    //$("#txtSeriesName").val(result.series_name);
                    setSelectedProject(result.projectId);
                    console.log("project: " + projectId + " updated");
                }
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });
    }

    //-------------------
    //  ---------------------   tab2 Outline Design---------------------
    //-------------------

    function initializeTab2() {
        var projectId = getSelectedProject();
        var customerId = getSelectedCustomer();
        initialProjectArea(projectId);
    }

    function initialProjectArea(projId) {
        var params = {
            project_id: projId
        };
        //--Grid--
        var updatePA = {
            url: '/TheProject/UpdateProjectArea'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , afterShowForm: function (formId) {

                }
                , afterclickPgButtons: function (whichbutton, formid, rowid) {

                }
                , modal: true
                , onclickSubmit: function (params) {
                    var ajaxData = {};

                    var list = $("#grdProjectArea");
                    var selectedRow = list.getGridParam("selrow");
                    var rowData = list.getRowData(selectedRow);
                    ajaxData = { project_area_id: rowData.project_area_id, project_id: rowData.project_id, area_type_id :rowData.area_type_id };

                    return ajaxData;
                }, success: function (result, status, xhr) {
                    if (result.isPass == false) {
                        alert(result.iMessage);
                    }
                    else {
                        alert("success");
                        dialog.dialog("close");
                    }
                }
                , width: "750"
        };

        $.jgrid.nav.addtext = "";
        $.jgrid.nav.edittext = "";
        $.jgrid.nav.deltext = "";
        $.jgrid.edit.addCaption = "เพิ่มเพิ่มพื้นที่";
        $.jgrid.edit.editCaption = "แก้ไขพื้นที่";
        $.jgrid.del.caption = "ต้องการลบรายการนี้หรือไม่?";
        $.jgrid.del.msg = "ต้องการลบพื้นที่นี้หรือไม่?";

        $("#grdProjectArea").jqGrid({
            postData: params,
            url: '/TheProject/GetProjectArea',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['project_id', 'project_area_id', 'พื้นที่', 'ประเภทพื้นที่', 'project_area_image', 'ชื่อพื้นที่', 'project_area_outline_url', 'project_area_size', 'project_paving_type', 'project_area_create_date'],
            colModel: [
                    { name: 'project_id', index: 'project_id', width: 40, align: 'left', key: true, editable: true, editrules: { edithidden: false }, hidden: true },
                    { name: 'project_area_id', index: 'project_area_id', width: 100, align: 'left', key: false, editable: false, edittype: 'text', editrules: { edithidden: false }, hidden: false  },
                    { name: 'area_type_id', index: 'area_type_id', width: 40, align: 'left', key: false, editable: true, edittype: 'select', editoptions: { dataUrl: "/TheProject/GetAreaTypeListHtml", dataInit: function (elem) { $(elem).width(170); } }, editrules: {  edithidden: true} , formoptions: { elmsuffix: ' '} , hidden:true},
                    { name: 'area_type_name', index: 'area_type_name', width: 40, align: 'left', key: false, editable: false, edittype: 'text', editrules: { edithidden: true} },
                    { name: 'project_area_image', index: 'project_area_image', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { edithidden: false }, hidden: true },
                    { name: 'project_area_name', index: 'project_area_name', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: false} },
                    { name: 'project_area_outline_url', index: 'project_area_outline_url', width: 120, align: 'left', key: false, editable: true, edittype: 'textarea', editrules: { edithidden: false }, hidden: true  },
                    { name: 'project_area_size', index: 'project_area_size', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { edithidden: false }, hidden: true },
                    { name: 'project_paving_type', index: 'project_paving_type', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { edithidden: false }, hidden: true },
                    { name: 'project_area_create_date', index: 'project_area_create_date', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { edithidden: false }, hidden: true }],
            pager: $('#pagerProjectArea'),
            beforeSelectRow: function (rowid, e) {

                var list = $("#grdProjectArea");
                var selectedRow = list.getGridParam("selrow");
                var rowData = list.getRowData(selectedRow);
                var ids = jQuery("#grdProjectArea").jqGrid('getGridParam', 'selarrrow');
                if (ids.length == 0) {
                    $("#grdProjectArea").jqGrid('resetSelection');
                    return (true);
                } else if (ids[0] == rowid) {
                    $("#grdProjectArea").jqGrid('resetSelection');
                    setSelectedCustomer("", "");
                    return (false);
                } else {
                    $("#grdProjectArea").jqGrid('resetSelection');
                    return (true);
                }
            }, ondblClickRow: function (rowid, iRow, iCol, e) {
                jQuery(this).jqGrid('editGridRow', rowid);
            },
            rowNum: 10,
            width: 850, height: 230,
            rownumbers: true,
            multiselect: true,
            sortname: 'project_area_create_date',
            sortorder: "desc",
            viewrecords: true,
            shrinkToFit: true,
            caption: 'รายการลูกค้า',
            autowidth: true
        }).navGrid('#pagerProjectArea',
            {
                edit: true, add: true, del: true, search: false, refresh: false
            },
            updatePA, updatePA,updatePA
        );
        
        var grid = $("#grdProjectArea");
        $("#cb_" + grid[0].id).hide();

        //--------
        @*$.ajax({
            type: "POST",
            url: "/TheProject/GetProjectArea",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (result, status, xhr) {
                if (result.isPass == false) {
                    console.log("call /TheProject/GetProjectArea failed");
                }
                else {
                    console.log("call /TheProject/GetProjectArea successed");
                }
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });*@
    }

    function selectAreaType() {
//        var selectedValue = $("#drpBlock").val();
//        var selectedText = $("#drpBlock option:selected").text();
//        var params = {
//            seriesId: selectedValue
//        };
//        $('#grdBlock').jqGrid('clearGridData');
//        $('#grdBlock').setGridParam({ url: '/Block/GetBlocksByKeywordOrSeries', postData: params }).trigger('reloadGrid');
    }
    function showDialog(src) {
        var areaName = $(src).text();
        var options = {
            title: areaName,
            autoOpen: false,
            width: 500,
            height: 430,
            modal: true,
            resizable: false
        };
        $("#txtAreaName").val(areaName);
        $("#dialog-modal").dialog(options);
        $('#dialog-modal').dialog('open');
        return false;
    }
    function onAreaSelect(src) {
        var areaName = $(src).text();
        $("#txtAreaName").val(areaName);
        $("#txtWorkType").val("?");
    }


    //-------------------
    //   ---------------------  tab3 Design---------------------
    //-------------------

    function onDesignSave() { alert('design save'); }
    var dom = {
        buildButton: function () {
            var button = document.createElement('div');
            button.setAttribute('id', 'newElement');
            button.style.width = "100px";
            button.style.height = "100px";
            button.innerHTML = 'new Element';
            document.body.appendChild(button);
        },
        buildTable: function () {
            var table = tblChoice; //document.createElement('table');            
            table.removeAttribute('visibility');
            obj.index = obj.index++;
            table.id = "tbl" + obj.index;
            divChoice.appendChild(table);
        }
    };
    var obj = new Object();
    obj.name = 'ตัวเลือกที่ 1';
    obj.desc = 'รายละเอียด';
    obj.index = 0;
    function createDiv() {
        var divTag = document.createElement("div");
        divTag.id = "div1";
        divTag.setAttribute("align", "left");
        divTag.setAttribute("vertical-align", "top");
        //divTag.style.margin = "0px auto";
        divTag.className = "dynamicDiv";
        //divTag.innerHTML = obj.name;
        obj.index = obj.index + 1;
        console.log("obj.index : "+obj.index);
        var index = obj.index;
        var buttonHtml = "<input type='button' id='btnChoiceNo" + index + "' onclick='onChoiceSelect(" + index + ");' /><input type='button' id='btnChoiceEdit" + index + "' onclick='onChoiceEdit(" + index + ");' />";
        var description = "<table id=\"" + obj.index + "\">" +
                            " <tr><td>" + obj.desc + "</td></tr>" +
                            " <tr><td>" + buttonHtml + "</td></tr>" +
                          "</table>";
         
        divTag.innerHTML = "<table id=\""+ obj.index +"\"><tr><td>"+obj.desc+"</td></tr></table>";
        divChoice.appendChild(divTag);
    }
    function createTable() {
        var table = tblChoice; //document.createElement('table');            
        table.removeAttribute('visibility');
        obj.index = obj.index++;
        table.id = "tbl" + obj.index;
        divChoice.appendChild(table);
    }
    function addChoice() {

        obj.index = obj.index + 1;
        var index = obj.index;
        console.log("obj.index : " + obj.index);
        var buttonChoiceSelect = "<input type='button' id='btnChoiceNo" + index + "' onclick='onChoiceSelect(" + index + ");' value='เลือก' />";
        var buttonChoiceEdit = "<input type='button' id='btnChoiceEdit" + index + "' onclick='onChoiceEdit(" + index + ");' value='แก้ไข' />";
        //$('#tblChoices > tbody').append('<tr><td><div id=div' + index + '>'+obj.desc+'</div></td></tr>');
        $('#tblChoices > tbody').append($("#rightObject").html().replace(/<%index%>/g,index).replace(/<%desc%>/g,obj.desc));
        
        //$('#div' + index).append(buttonChoiceSelect).button();
        //$('#div' + index).append(buttonChoiceEdit).button();
        //$('#div'+index).append('<input type="button" value="My button">').button().click(function () { alert('I was clicked!'); });
    }
    function onDesignCreate() {
        addChoice();
        //createTable();
    }

    function onChoiceSelect(i) {
        alert('onchoice select:' + i);
    }

    function onChoiceDelete(i) {
        $("#tr" + i).remove();
    }

    function openDialogAreaDesign(src) {
        var areaName = $(src).text();
        var options = {
            title: areaName,
            autoOpen: false,
            width: 800,
            height: 530,
            modal: true,
            resizable: false
        };
        //$("#txtAreaName").val(areaName);
        $("#dialog-areaDesign").dialog(options);
        $('#dialog-areaDesign').dialog('open');
        return false;
    }

    //tab3.1.1
    function openDialogAreaProperties(src) {
        var areaName = $(src).text();
        var options = {
            title: areaName,
            autoOpen: false,
            width: 800,
            height: 530,
            modal: true,
            resizable: false
        };
        //$("#txtAreaName").val(areaName);
        $("#dialog-areaProperties").dialog(options);
        $('#dialog-areaProperties').dialog('open');
        return false;
    }

    //tab3.2
    function openDialogDesign(src) {
        var areaName = $(src).text();
        var options = {
            title: "Generate Design",
            autoOpen: false,
            width: 530,
            height: 530,
            modal: true,
            resizable: false
        };
        //$("#txtAreaName").val(areaName);
        $("#dialog-generateDesign").dialog(options);
        $('#dialog-generateDesign').dialog('open');
        return false;
    }
    
    //--3.2
    function GenerateDesign() {
        alert("GenerateDesign");
    }

    function KeepDesign() {
        alert("KeepDesign");
    }

    //-------------------
    //    --------------------- tab4 Summary---------------------
    //-------------------

    function initializeTab4(){
        //$("#txtProjName").val($("#hfSelectedProject").val());
        $("#txtProjName").val($("#txtSelectedProject").val());
        
        var custName = $("#hfCustomerName").val();
        $("#txtCustomerName").val(custName);

        $("#searchTextField").keyup(function() {
           var htmlStr = $("#divGmaps").html();
          $("#divGmaps").append($("#mapsObject").html());
        });

    }

    function initializeMaps() {

        var mapOptions = {
            center: new google.maps.LatLng(13.8196, 100.2195),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map-customer'), mapOptions);
        map.bind('init', function(event, map1) { 
            $(map1).click( function(event) {
                var lat=event.latLng.lat();
                var lng=event.latLng.lng();
                $('#latlng').val(lat+', '+lng); // 'latlng' is the id of the input
            });
        });
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({ map: map });

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            infowindow.close();
            marker.setVisible(false);
            input.className = '';
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                input.className = 'notfound';
                return;
            }

            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }
            var image = {
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(35, 35)
            };
            marker.setIcon(image);
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);

            var address = '';
            if (place.address_components) {
                address = [
                              (place.address_components[0] && place.address_components[0].short_name || ''),
                              (place.address_components[1] && place.address_components[1].short_name || ''),
                              (place.address_components[2] && place.address_components[2].short_name || '')
                            ].join(' ');
            }

            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
            infowindow.open(map, marker);
        });
    }

</script>
<style type="text/css">
    .ui-pg-input
    {
        width: 50px;
        text-align: right;
    }
</style>
<script id="mapsObject" type="template">
<iframe src="http://mapsengine.google.com/map/u/0/view?mid=zptXfx5Qw8u4.kviq0wAzi1ac" width="640" height="480"></iframe>
</script>
<script id="rightObject" type="template">
<tr id="tr<%index%>">
    <td>
        <table id="tbl<%index%>" class="dynamicTable">
            <tr><td><%desc%><%index%></td></tr>
            <tr><td><img id="img<%index%>" src="#" alt="<%desc%>" width="300px" height="50px" /></td></tr>
            <tr>
                <td><input type="button" id="btnChoiceNo<%index%>" class="btn btn-primary" style="width:70px" onclick="onChoiceSelect(<%index%>);" value="เลือก" /> &nbsp;<input type="button" id="btnChoiceNo<%index%>" class="btn btn-primary" style="width:70px" onclick="onChoiceDelete(<%index%>);" value="ลบ" /></td>
            </tr>
        </table>
    </td>
</tr>
</script>
<input type="hidden" id="hfProjectId" />
<div class="form-horizontal">
    <div class="row-fluid">
    </div>
    <legend>ข้อมูลโครงการ</legend>
    <div id="tabs" style="height: 100%; width: 1100px;">
        <ul>
            <li><a href="#tabs-1">1. ลูกค้า</a></li>
            <li><a href="#tabs-2">2. พื้นที่โครงการ</a></li>
            <li><a href="#tabs-3">3. ออกแบบ</a></li>
            <li><a href="#tabs-4">4. รายละเอียดโครงการ</a></li>
        </ul>
        <!---->
        <!--1-->
        <div id="tabs-1">
            <div>
                เลือกลูกค้า</div>
            <div style="height: 500px; width: 100%;">
                <div id="customerTabs">
                    <ul>
                        <li><a href="#custTabs-1">ค้นหาลูกค้า</a></li>
                        <li><a href="#custTabs-2">ลูกค้าใหม่</a></li>
                    </ul>
                    <div id="custTabs-1" style="height: 400px">
                        <table style="width: 100%;">
                            <tr>
                                <td style="vertical-align: top;">
                                    ค้นหา
                                </td>
                                <td>
                                    <input type="text" id="txtSearchCustName" name="txtCustName" />
                                    <p class="help-block">
                                        กรอกส่วนใดส่วนหนึ่งของ ชื่อ/นามสกุล/เบอร์โทรศัพท์ ของลูกค้าเพื่อค้นหา</p>
                                </td>
                                <td>
                                    <input type="button" id="btnSearchCustomer" value="ค้นหา" class="btn btn-primary" />
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 1px" colspan="3">
                                    <hr />
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 200px;" colspan="3">
                                    <div class="control-group">
                                        <table id="grdCustomer">
                                        </table>
                                        <div id="pagerCustomer">
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="custTabs-2" style="width: 100%; height: 400px;">
                        <table style="width: 100%;">
                            <tr>
                                <td>
                                    ชื่อ
                                </td>
                                <td colspan="2">
                                    <input type="text" id="txtCustFirstName" name="txtCustName" /><span style="color: Red">*</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    นามสกุล
                                </td>
                                <td colspan="2">
                                    <input type="text" id="txtCustLastName" name="txtCustLastName" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    บริษัท
                                </td>
                                <td colspan="2">
                                    <input type="text" id="txtCustCompany" name="txtCustCompany" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ประเภทลูกค้า
                                </td>
                                <td colspan="2">
                                    <select id="drpCustType">
                                        <option value="person" selected>บุคคล</option>
                                        <option value="company">บริษัท</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    เบอร์โทรศัพท์
                                </td>
                                <td colspan="2">
                                    <input type="text" id="txtCustTel" name="txtCustTel" /><span style="color: Red">*</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Email
                                </td>
                                <td colspan="2">
                                    <input type="text" id="txtCustEmail" name="txtCustEmail" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    แฟกซ์
                                </td>
                                <td colspan="2">
                                    <input type="text" id="txtCustFax" name="txtCustFax" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ที่อยู่
                                </td>
                                <td colspan="2">
                                    <input type="text" id="txtCustAddress" name="txtCustAddress" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                                <td colspan="2">
                                    <input type="button" id="btnCustomerSave" value="บันทึก" class="btn btn-primary" />
                                    &nbsp;
                                    <input type="button" id="btnCustomerReset" value="รีเซ็ต" class="btn btn-primary" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div style="text-align: right;">
                <hr style="margin: 5 5 5 5" />
                <input type="button" id="btnCustNext" name="btnCustNext" value="ต่อไป" class="btn btn-primary"
                    onclick="onNext();" />
            </div>
            <input type="hidden" id="hfSelectedCustomer" />
            <input type="hidden" id="hfSelectedProject" />
            <input type="hidden" id="hfCustomerName" />
            <input type="hidden" id="hfProjectName" />
        </div>
        <div id="tabs-2">
            <div>
                Outline Area</div>
            <div id="altContent" style="height: 100%; width: 100%;">
                <table>
                    <tr>
                        <td style="position: relative;">
                            <div class="container">
                                <div class="row">
                                    <div id="canvas" class="span6">
                                        <div id="tools" class="row-fluid">
                                            <div class="btn-group pull-left" data-toggle="buttons-radio">
                                                <button id="btnMove" type="button" class="btn btn-primary tool" data-tools="move">
                                                    <i class="icon icon-move"></i>
                                                </button>
                                                <button id="btnEdit" type="button" class="btn btn-primary tool active" data-tools="edit">
                                                    <i class="icon icon-pencil"></i>
                                                </button>
                                                <button id="btnDelete" type="button" class="btn btn-primary tool" data-tools="delete">
                                                    <i class="icon icon-trash"></i>
                                                </button>
                                            </div>
                                            <div class="btn-group pull-left">
                                                <button id="btnZoomIn" type="button" class="btn">
                                                    <i class="icon icon-zoom-in"></i>
                                                </button>
                                                <button id="btnZoomOut" type="button" class="btn">
                                                    <i class="icon icon-zoom-out"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div id="svgcanvas" style="height: 600px; background-color: #EEEEEE;">
                                        </div>
                                    </div>
                                    <div id="list" class="span6 ">
                                        <div>
                                            <div class="control-group">
                                                <label class="control-label">
                                                    Areas</label>
                                                <div class="controls">
                                                    <div class="input-prepend">
                                                        <div class="btn-group">
                                                            <button class="btn dropdown-toggle" data-toggle="dropdown">
                                                                Action <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu">
                                                                <li><a id="create-area">create Area</a></li>
                                                                <li><a id="destroy-area">Delete Area</a></li>
                                                            </ul>
                                                        </div>
                                                        <select id="select-area-name">
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="area-property" class="well">
                                                <input type="hidden" name="area_id" value="0" />
                                                <div class="control-group">
                                                    <label class="control-label">
                                                        ชื่อพื้นที่</label>
                                                    <div class="controls">
                                                        <input type="text" name="area_name" id="area_name" />
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label class="control-label">
                                                        ประเภทการใช้งาน</label>
                                                    <div class="controls">
                                                        <select name="area_type_id" id="area_type_id">
                                                            <option value="1">บริเวณบ้าน/สวน</option>
                                                            <option value="2">ทางเดินเท้า</option>
                                                            <option value="3">โกดังสินค้า/ที่จอดรถ</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label class="control-label">
                                                        ขนาดพื้นที่</label>
                                                    <div class="controls">
                                                        <input class="area-size" type="text" name="area_size" id="area_size" readonly /></div>
                                                </div>
                                                <table id="tablePoint" class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th>
                                                                X
                                                            </th>
                                                            <th>
                                                                Y
                                                            </th>
                                                            <th>
                                                                Actions
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="point-list">
                                                    </tbody>
                                                </table>
                                                <button type="button" id="add-point" class="btn">
                                                    Add Point</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions" style="display: none;">
                                    <form id="form-lists">
                                    <ul class="" id="list-form">
                                        <li>
                                            <input type="text" class="hidden_area_id" name="area_id[]" value="2" />
                                            <input type="text" class="hidden_area_name" name="area_name[]" value="โรงจอดรถสุดหรู" />
                                            <input type="text" class="hidden_area_type_id" name="area_type_id[]" value="2" />
                                            <input type="text" class="hidden_area_size" name="area_size[]" value="48" />
                                            <input type="text" class="hidden_area_outline" name="area_outline[]" value='[{"posX":"19.500","posY":"3.800","id":"eb7ef22d-8a2d-5234-d7a3-7c676ef1d4d7"},{"posX":"27.600","posY":"2.900","id":"c919b4da-7378-7dfd-e014-8f53dc65a5db"},{"posX":"25.100","posY":"7.400","id":"e75cadf3-b55e-c8af-e85e-e31ff3004af2"},{"posX":"27.300","posY":"13.000","id":"759c3df1-16e2-6ae8-58eb-e5b8ee98ebf4"},{"posX":"18.300","posY":"11.300","id":"9d1027d1-dfc4-f377-b3d0-06f209dafe03"},{"posX":"14.400","posY":"13.000","id":"9297fd80-f65f-15fd-8f08-616960e8c762"},{"posX":"7.700","posY":"10.800","id":"748df4a4-356c-a000-d5ac-bd91023ddb76"},{"posX":"1.800","posY":"12.900","id":"6fe2ec23-108d-efd4-2ba8-a13e008989be"},{"posX":"3.500","posY":"7.500","id":"6951da09-a3a4-bd06-6826-42aa6f5341bf"},{"posX":"2.800","posY":"1.800","id":"565a9873-40a8-3de2-4aaf-17cef47f359d"},{"posX":"9.600","posY":"3.800","id":"13ffccd2-4902-e97d-1e7e-c0d830820470"},{"posX":"15.600","posY":"1.000","id":"d22571d1-17f5-f109-af06-5369750fba59"}]' />
                                        </li>
                                        <li>
                                            <input type="text" class="hidden_area_id" name="area_id[]" value="3" />
                                            <input type="text" class="hidden_area_name" name="area_name[]" value="สวนหลังบ้าน" />
                                            <input type="text" class="hidden_area_type_id" name="area_type_id[]" value="1" />
                                            <input type="text" class="hidden_area_size" name="area_size[]" value="24" />
                                            <input type="text" class="hidden_area_outline" name="area_outline[]" value='[{"posX":"0","posY":"0","id":"3796b03e-88fe-c404-cde4-274801da821e"},{"posX":"10","posY":"0","id":"6d7000a5-200b-6d10-0f17-72d6363a56ee"},{"posX":"10","posY":"10","id":"68137a98-313b-3863-752c-45b71231ee69"},{"posX":"0","posY":"10","id":"e3ba8bd1-1015-ee41-4abc-304a8da88abe"}]' />
                                        </li>
                                    </ul>
                                    <button type="submit" class="pull-right">
                                        Save Change</button>
                                    </form>
                                </div>
                            </div>
                        </td>
                        @* <td style="vertical-align:top; text-align:left; padding-left:10px;">
                                <table style="background-color: Silver">
                                    <tr>
                                        <td>
                                            <table style="width:400px; height:450px">
                                                <tr style="height:300px">                                                    
                                                    <td style="vertical-align:top; text-align:left; padding-left:10px;" colspan="2">
                                                        <span><h3>รายการพื้นที่</h3></span>
                                                        <a href="#" id="lnkFront" onclick="onAreaSelect(this);">พื้นที่หน้าบ้าน</a><br/>
                                                        <a href="#" id="lnkSide" onclick="onAreaSelect(this);">พื้นที่ข้างบ้าน</a><br />
                                                        <a href="#" id="lnkBack" onclick="onAreaSelect(this);">พื้นที่หลังบ้าน</a>
                                                        
                                                        
                                                    </td>
                                                </tr>
                                                <tr  style="background-color: White">
                                                    <td>
                                                        <label class="control-label" for="txtAreaName">พื้นที่ </label>                                                    
                                                    </td>
                                                    <td>
                                                        <input type="text" class="input-small" id="txtAreaName" />
                                                    </td>
                                                </tr>
                                                <tr  style="background-color: White">
                                                    <td>
                                                        <label class="control-label" for="txtWorkType">ประเภทการใช้งาน </label>                                                    
                                                    </td>
                                                    <td>
                                                        <select id="drpWorkType">
                                                          <option value="GardenPaths" selected>บริเวณบ้าน/ทางเดินสนาม</option>
                                                          <option value="Driveways">ทางเดินรถ/ทางเดินเท้า</option>
                                                          <option value="HeavyUses">ลานจอดรถ/โกดังสินค้า</option>
                                                        </select>
                                                    </td>
                                                </tr>                                                
                                                <tr>
                                                    <td>                                                   
                                                    </td>
                                                    <td>
                                                        <button type="submit" class="btn btn-primary" onclick="">บันทึก</button>&nbsp;&nbsp;
                                                        <button type="reset" class="btn btn-primary" onclick="">รีเซ็ท</button>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>*@
                    </tr>
                    <tr>
                        <td colspan="2">
                            Grid Project Area
                            <table id="grdProjectArea">
                            </table>
                            <div id="pagerProjectArea">
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="text-align: right;">
                <hr style="margin: 5 5 5 5" />
                <input type="button" id="btnProjPrev" name="btnProjPrev" value="ก่อนหน้า" class="btn btn-primary"
                    onclick="onPrev();" />
                <input type="button" id="btnProjNext" name="btnProjNext" value="ต่อไป" class="btn btn-primary"
                    onclick="onNext();" />
            </div>
        </div>
        <div id="tabs-3">
            <div>
                Design</div>
            <div style="height: 100%; width: 100%;">
                <table>
                    <tr>
                        <td style="vertical-align: top; width: 450px; padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px;
                            background-color: Gray">
                            <table>
                                <tr>
                                    <td style="text-align: left;">
                                        <img src="../../Content/images/OutlineDesigner.png" width="450px" alt="" /><br />
                                        @*<input type="button" id="btnDesign" style="margin:10px 10px 10px 10px" name = "btnDesign" value="Design" class="btn btn-primary"  onclick="openDialogDesign(this);" />*@
                                        <input type="button" id="btnDesign" style="margin: 10px 10px 10px 10px" name="btnDesign"
                                            value="Design" class="btn btn-primary" onclick="#" />
                                        @*<input type="button" id="btnLnkFront" name = "btnLnkFront" onclick="openDialogAreaDesign(this);" value="พื้นที่หน้าบ้าน" />*@
                                        <input type="button" id="btnLnkFront" name="btnLnkFront" onclick="#" value="พื้นที่หน้าบ้าน" />
                                        <input type="button" id="btnLnkSide" name="btnLnkSide" onclick="openDialogAreaDesign(this);"
                                            value="พื้นที่ข้างบ้าน" />
                                        <input type="button" id="btnLnkBack" name="btnLnkBack" onclick="openDialogAreaDesign(this);"
                                            value="พื้นที่หลังบ้าน" />
                                    </td>
                                </tr>
                                <tr>
                                    <td style="background-color: White">
                                        <table border="1" style="width: 100%; border-width: 1px; border-color: Black; margin: 0 0 0 0px;
                                            padding: 0 0 0 0px;">
                                            <tr>
                                                <td>
                                                    <table>
                                                        <tr>
                                                            <td>
                                                            </td>
                                                            <td>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <table>
                                                        <tr>
                                                            <td>
                                                                แพทเทิร์น
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <input type="checkbox" value="pattern" />
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <table>
                                                        <tr>
                                                            <td>
                                                                สี
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <table>
                                                                    <tr>
                                                                        <td>
                                                                            <input type="checkbox" value="color" />
                                                                        </td>
                                                                        <td style="background-color: #FF6600; width: 10px; height: 10px; padding-right: 15px;
                                                                            padding-top: 5px; margin-right: 5px">
                                                                            &nbsp;
                                                                        </td>
                                                                        <td style="padding-right: 5px">
                                                                        </td>
                                                                        <td>
                                                                            <input type="checkbox" value="color" />
                                                                        </td>
                                                                        <td style="background-color: #0000CC; width: 10px; height: 10px; padding-right: 15px;
                                                                            padding-top: 5px; margin-right: 5px">
                                                                            &nbsp;
                                                                        </td>
                                                                        <td style="padding-right: 5px">
                                                                        </td>
                                                                        <td>
                                                                            <input type="checkbox" value="color" />
                                                                        </td>
                                                                        <td style="background-color: #99CCFF; width: 10px; height: 10px; padding-right: 15px;
                                                                            padding-top: 5px; margin-right: 5px">
                                                                            &nbsp;
                                                                        </td>
                                                                        <td style="padding-right: 5px">
                                                                        </td>
                                                                        <td>
                                                                            <input type="checkbox" value="color" />
                                                                        </td>
                                                                        <td style="background-color: #FF3300; width: 10px; height: 10px; padding-right: 15px;
                                                                            padding-top: 5px; margin-right: 5px">
                                                                            &nbsp;
                                                                        </td>
                                                                        <td style="padding-right: 5px">
                                                                        </td>
                                                                        <td>
                                                                            <input type="checkbox" value="color" />
                                                                        </td>
                                                                        <td style="background-color: #FFCC00; width: 10px; height: 10px; padding-right: 15px;
                                                                            padding-top: 5px; margin-right: 5px">
                                                                            &nbsp;
                                                                        </td>
                                                                        <td style="padding-right: 5px">
                                                                        </td>
                                                                        <td>
                                                                            <input type="checkbox" value="color" />
                                                                        </td>
                                                                        <td style="background-color: #009933; width: 10px; height: 10px; padding-right: 15px;
                                                                            padding-top: 5px; margin-right: 5px">
                                                                            &nbsp;
                                                                        </td>
                                                                        <td style="padding-right: 5px">
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td style="width: 100px; vertical-align: top; text-align: center; padding: 10px 10px 10px 10px;
                            background-color: transparent">
                            <input type="button" id="btnDesignSave" name="btnDesignSave" value="บันทึก" style="width: 70px"
                                onclick="onDesignSave();" /><br />
                            <br />
                            <input type="button" id="btnDesignCreate" name="btnDesignCreate" value="สร้างใหม่"
                                style="width: 70px" onclick="onDesignCreate();" />
                        </td>
                        <td style="width: 450px; padding: 0 10 0 10; margin: 10 10 10 10; background-color: Orange;
                            vertical-align: top;">
                            <div id="divChoice" style="text-align: left;">
                                <table id="tblChoices">
                                    <tbody>
                                        <tr>
                                            <td style="">
                                                ตัวเลือก
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
                <div id="dialog-AreaDesign" title="Area Design">
                </div>
            </div>
            <div style="text-align: right;">
                <hr style="margin: 5 5 5 5" />
                <input type="button" id="btnDesignPrev" name="btnDesignPrev" value="ก่อนหน้า" class="btn btn-primary"
                    onclick="onPrev();" />
                <input type="button" id="btnDesignNext" name="btnDesignNext" value="ต่อไป" class="btn btn-primary"
                    onclick="onNext();" />
            </div>
        </div>
        <div id="tabs-4">
            <div style="height: 100%; width: 100%;">
                <table style="width: 100%;">
                    <tr>
                        <td>
                            โครงการ
                        </td>
                        <td colspan="2">
                            <input type="text" id="txtProjName" name="txtProjName" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            ลูกค้า
                        </td>
                        <td colspan="2">
                            <input type="text" id="txtCustomerName" name="txtCustomerName" />
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top;">
                            ที่อยู่โครงการ
                        </td>
                        <td colspan="2">
                            <div id="search-panel">
                                <input id="searchTextField" type="text" placeholder="Search Box" />
                                <a href="https://mapsengine.google.com/map/u/0/edit?mid=zptXfx5Qw8u4.klTJyXEy2kTg"
                                    style="color: Blue; text-decoration: underline" target="_blank">help</a>
                            </div>
                            <script>
                                $(document).ready(function () {
                                    $('#searchTextField').change(function () {
                                        $('#divMaps').html($('#searchTextField').val());
                                    });
                                });
                            </script>
                            <div id="divMaps">
                                <iframe src="http://mapsengine.google.com/map/u/0/view?mid=zptXfx5Qw8u4.klTJyXEy2kTg"
                                    width="640" height="480"></iframe>
                            </div>
                            <input type="text" id="latlng" value="latitude" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td colspan="2">
                            <input type="button" id="btnProjectSave" value="บันทึกข้อมูลโครงการ" class="btn btn-primary" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td colspan="2">
                        </td>
                    </tr>
                </table>
            </div>
            <div style="text-align: right;">
                <hr style="margin: 5 5 5 5" />
                <input type="button" id="btnSumPrev" name="btnSumPrev" value="ก่อนหน้า" class="btn btn-primary"
                    onclick="onPrev();" />
                <input type="button" id="btnSumNext" name="btnSumNext" value="สิ้นสุด" class="btn btn-primary"
                    onclick="onNext();" />
            </div>
        </div>
    </div>
    <input type="text" id="txtSelectedCustomer" style="color: White; border-width: 0px;" />
    <input type="text" id="txtSelectedProject" style="color: White; border-width: 0px;" />
    <!-- 2.1 Outline Properties Dialog -->
    @*<div id="dialog-modal" title="Block :"  class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="txtAreaName">พื้นที่ </label>
            <div class="controls">
                <input type="text" class="input-xlarge" id="txtAreaName" />
            </div>
        </div>            
        <div class="control-group">
            <label class="control-label" for="txtWorkType">ประเภทการใช้งาน </label>
            <div class="controls">
                <input type="text" class="input-xlarge" id="txtWorkType"/>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
            </div>
            <div class="controls">
                <button type="submit" class="btn btn-primary" onclick="$('#dialog-modal').dialog('close');">OK</button>&nbsp;&nbsp;
                <button type="button" class="btn btn-primary" onclick="$('#dialog-modal').dialog('close');">cancel</button>
            </div>
        </div>
    </div>*@
    <!--3.1 Specific Area Design Dialog -->
    <div id="dialog-areaDesign">
        <table>
            <tr>
                <td style="height: 300px">
                    <img src="../../Content/images/Area1.png" /><br />
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top; text-align: left; padding-left: 10px;">
                    <input type="button" id="btnSetProperties" name="btnSetProperties" value="Set Properties"
                        class="btn btn-primary" onclick="openDialogAreaProperties(this);" />
                    &nbsp;
                    <input type="button" id="btnSaveAreaDesign" name="btnSaveAreaDesign" value="SAVE"
                        class="btn btn-primary" onclick="onSaveDesign(this);" />
                    &nbsp;
                    <input type="button" id="btnEditAreaDesign" name="btnEditAreaDesign" value="EDIT"
                        class="btn btn-primary" onclick="onEditDesign(this);" />
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top; text-align: left; padding-left: 10px;">
                    <button type="submit" class="btn btn-primary" onclick="$('#dialog-areaDesign').dialog('close');">
                        OK</button>&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary" onclick="$('#dialog-areaDesign').dialog('close');">
                        cancel</button>
                </td>
            </tr>
        </table>
    </div>
    <!--3.1.1 Specific Area properties Dialog-->
    <div id="dialog-areaProperties">
        <table>
            <tr>
                <td style="">
                    <input type="radio" name="block" value="block" />อิฐบล็อค<br />
                </td>
            </tr>
            <tr>
                <!--hidden-->
                <td style="">
                    <input type="radio" name="color" value="color" />สี<br />
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top; text-align: left; padding-left: 10px;">
                    <input type="radio" name="pattern" value="pattern">แพทเทิร์น
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top; text-align: left; padding-left: 10px;">
                    รูป
                    <input type="text" />
                    <input type="button" value="..." />
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top; text-align: left; padding-left: 10px;">
                    <button type="submit" class="btn btn-primary" onclick="$('#dialog-areaProperties').dialog('close');">
                        OK</button>&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary" onclick="$('#dialog-areaProperties').dialog('close');">
                        cancel</button>
                </td>
            </tr>
        </table>
    </div>
    <!--3.2 Generate Design Dialog -->
    <div id="dialog-generateDesign">
        <table>
            <tr>
                <td style="">
                    <table>
                        <tr>
                            <td style="">
                                <img src="../../Content/images/GeneratedDesign.png" /><br />
                            </td>
                            <td style="vertical-align: top; text-align: left; padding-left: 10px;">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" id="btnGenDesign" name="btnGenDesign" value="Generate Design"
                                    class="btn btn-primary" onclick="GenerateDesign();" />
                                &nbsp;
                                <input type="button" id="btnKeepDesign" name="btnKeepDesign" value="Keep Design"
                                    class="btn btn-primary" onclick="KeepDesign();" />&nbsp;
                                <input type="button" id="btnCancelDesign" name="btnCancelDesign" value="Cancel" class="btn btn-primary"
                                    onclick="$('#dialog-generateDesign').dialog('close');" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="confirmDlg" title="Confirmation Required">
    Are you sure about this?
</div>


<script src="@Url.Content("~/Scripts/tools/js/underscore-min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/tools/js/backbone-min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/tools/js/backbone.localStorage-min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/tools/js/raphael-min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/tools/outlinedesigner.js")" type="text/javascript"></script>

<script id="areaInputTemplate" type="text/template">
        <li>
            <input type="text" class="hidden_area_id" name="area_id[]" value="0" />
            <input type="text" class="hidden_area_name" name="area_name[]" />
            <input type="text" class="hidden_area_type_id" name="area_type_id[]" />
            <input type="text" class="hidden_area_size" name="area_size[]" />
            <input type="text" class="hidden_area_outline" name="area_outline[]" value="[]" />
        </li>
</script>
<script id="pointTemplate" type="text/template">
        <tr>
            <td><input type="text" class="input-block-level posX" name="posX" value="<%=posX %>" /></td>
            <td><input type="text" class="input-block-level posY" name="posY" value="<%=posY %>" /></td>
            <td>
                <a class="destroy btn">Delete</a>
            </td>
        </tr>
</script>
